<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body style="margin:50px;">


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">小图标连接</p>
http://v3.bootcss.com/components/#glyphicons
<br/>class方式的图标
<i class="glyphicon glyphicon-star"></i>
<br/>span方式的图标
<span class="glyphicon glyphicon-star"></span>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">按钮里嵌套图标</p>

<button class="btn btn-default btn-lg">

<span class="glyphicon glyphicon-star"></span> </button>

&nbsp;&nbsp;&nbsp;&nbsp;第2种&nbsp;&nbsp;&nbsp;&nbsp;
<button class="btn btn-default btn">

<span class="glyphicon glyphicon-star"></span> </button>
&nbsp;&nbsp;&nbsp;&nbsp;第3种&nbsp;&nbsp;&nbsp;&nbsp;

<button class="btn btn-default btn-sm">

<span class="glyphicon glyphicon-star"></span> </button>
&nbsp;&nbsp;&nbsp;&nbsp;第4种&nbsp;&nbsp;&nbsp;&nbsp;

<button class="btn btn-default btn-xs">

<span class="glyphicon glyphicon-star"></span> </button>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">下拉菜单</p>

<div class="dropdown">

<button class="btn btn-default" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button>

<ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">上拉菜单</p>

<div class="dropup">

<button class="btn btn-default" data-toggle="dropdown">

上拉菜单

<span class="caret"></span> </button>

<ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">下拉菜单 加标题，标题不被点击，还有分割线  禁用项class="disabled"</p>

<div class="dropdown">

<button class="btn btn-default" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button>

<ul class="dropdown-menu"> 

<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> 
<li><a href="#">产品</a></li> 
<li class="divider"></li>
<li class="disabled"><a href="#">关于</a></li>

</ul>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">按钮组件</p>

有空隙的

<button type="button" class="btn btn-default">左</button>
 <button type="button" class="btn btn-default">中</button> 
 <button type="button" class="btn btn-default">右</button>

&nbsp;&nbsp;&nbsp;&nbsp;没有空隙的
<div class="btn-group">

<button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//将多个按钮组整合起来便于管理</p>


<div class="btn-toolbar"> <div class="btn-group">

<button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button>

</div>

</div>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//设置按钮组大小</p>

<div class="btn-toolbar"> <div class="btn-group btn-group-lg">

<button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button>

</div>

</div>

还有  div class="btn-group btn-group-sm   和  div class="btn-group btn-group-xs


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//嵌套一个分组，要改两个地方</p>

<div class="btn-group">

<button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> <div class="btn-group">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单

<span class="caret"></span> </button>


<ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>

</div>

</div>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">垂直排列</p>

<div class="btn-group-vertical">

<button type="button" class="btn btn-default">左</button> 
<button type="button" class="btn btn-default">中</button> 
<button type="button" class="btn btn-default">右</button>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">两端对齐</p>
 <div class="btn-group-justified">

<a type="button" class="btn btn-default">左</a> <a type="button" class="btn btn-default">中</a> <a type="button" class="btn btn-default">右</a>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">用button设置两端对齐</p>
<div class="btn-group-justified"> <div class="btn-group">
<button type="button" class="btn btn-default">左</button> </div>
<div class="btn-group">

<button type="button" class="btn btn-default">中</button> </div>
<div class="btn-group">

<button type="button" class="btn btn-default">右</button> </div>
</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//分裂式按钮下拉菜单</p>

<div class="btn-group">

<button type="button" class="btn btn-default">下拉菜单</button> <button type="button" class="btn btn-default dropdown-toggle"

data-toggle="dropdown">

<span class="caret"></span> </button>

<ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>

</div>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//向上弹出式</p>


<div class="btn-group dropup">

<button type="button" class="btn btn-default">上拉菜单</button> <button type="button" class="btn btn-default dropdown-toggle"

data-toggle="dropdown">

<span class="caret"></span> </button>

<ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>

</div>










<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>